<template>
   <div>
     <div  @mouseleave="changeSrtipTop(0,'leave')" > 
       <button v-for="item in SetNaviData" :key="item.id" :class="getNaviClass(item.id)"
               @click="SETSETTINGINDEX(item.id)"
               @mouseover.stop="changeSrtipTop(item.id,'hover')">
            <img :src="require('@/assets/function/'+item.icon)" alt="" v-if="item.icon" class="icon">
           <div class="name">{{item.name}}</div>
       </button>
     </div>
       <div class="strip" ref="strip">
           
       </div>
   </div>
</template>
<script>
import {mapMutations,mapState} from 'vuex'
  export default 
  {
     name :'', 
     data() {
        return {
            SetNaviData:[
                {id:1,name:'背景图片',icon:'Photo.png'},
                {id:2,name:'背景颜色',icon:'Color.png'},
                {id:3,name:'主题风格',icon:'Subject.png'},
                // {id:4,name:'未定义2'}
            ],
            NowTop:0,
            NextTop:0,
            timer:null,
            paddingTop:10,
            marginTop:5,
        }
     },
     computed:{
        ...mapState('Setting',['SettingIndex']),
     },
     methods: {
        ...mapMutations('Setting',['SETSETTINGINDEX']),
         getNaviClass(id){
            if(id==this.SettingIndex)
            return 'SetNaviOne flex active'
            return 'SetNaviOne flex'
        },
        init(){
            let top=(this.SettingIndex-1) *(40+this.marginTop)  + this.paddingTop  +this.marginTop 
            
            if(this.$refs.strip){
                this.$refs.strip.style.top=top+'px'
            }
        },
        changeSrtipTop(id,type){
            clearInterval(this.timer)
            if(type =='hover'){
                // this.NowTop=this.NextTop
                this.NextTop=(id-1) * (40+this.marginTop) + this.paddingTop +this.marginTop
            }
            else{
                //  this.NowTop=this.NextTop
                 this.NextTop=(this.SettingIndex-1) *(40+this.marginTop)  + this.paddingTop  +this.marginTop
            }
            let count=0
            let Top=0
            // 100: 1s 50:0.5s 20:0.2s
            let v = parseInt(Math.abs(this.NowTop-this.NextTop)/30)
            if(v==0) v=1
            let turn = this.NowTop<=this.NextTop ? 'down' : 'up'
            this.timer=setInterval(()=>{
              if( this.$refs.strip==null)
                  clearInterval(this.timer)
               if(this.NowTop<=this.NextTop)
               this.NowTop =this.NowTop +  v
               else this.NowTop = this.NowTop -  v
               this.$refs.strip.style.top=this.NowTop+'px'  


               if(turn=='down' && this.NowTop>=this.NextTop || turn=='up' && this.NowTop<=this.NextTop){
                  this.$refs.strip.style.top=this.NextTop+'px'
                  clearInterval(this.timer)
               }
               count+=1

               if(count>1000)
               clearInterval(this.timer)
            },10)
            
        }
     },
     mounted(){
        this.init()
     },
     beforeDestroy(){
        clearInterval(this.timer)
     }
  }
</script>
<style scoped lang='less'>
 /* 平板或手机 */
 @media screen and (max-width: 1000px){
  
     div.name{
        display: none;
     }
   
 }
.SetNaviOne{
    width: 100%;
    height: 40px;
    font-size: 16px;
    box-sizing: border-box;
    align-items: 40px;
    letter-spacing: 2px;
    border-radius: 5px;
    margin-top: 5px;
    font-family: var(--fontFamuly);
    color: gray;

    .icon{
       width: 25px;  
       height: 25px;
       margin-right: 5px;
    }
}
.SetNaviOne:hover , .active{
    background: var(--GeneralBackColor-half);
    color: black;
}

.strip{
    width: 5px;
    height: 40px;
    background: var( --GeneralBackColor);
    position: absolute;
    top: 15px;
}

</style>